<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溢出的文字用省略号表示</title>
    <style>
        /* 单行文本溢出省略号 */
        .box1 {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 0 auto;
            /* 如果文字显示不开，强制在一行内显示，并不自动切换到下一行 */
            white-space: nowrap;
            /* 多余的部分隐藏起来 */
            overflow: hidden;
            /* 隐藏起来的那一部分文字用省略号表示 */
            text-overflow: ellipsis;
        }

        .box {
            width: 150px;
            /* 第三行也会显示出来，所以需要修改高度，让盒子的高度和伸缩盒省略号所在行高度保持一致 */
            height: 40px;
            /* height: 80px; */
            background-color: antiquewhite;
            margin: 100px auto;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 用省略号表示 */
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 下面这两行也是要写上的，但是可能软件不兼容，报错，所以先注释掉了 */
            /* 限制在一个块元素显示的文本行数 */
            /* -webkit-line-clamp: 2; */
            /* 设置或者检索伸缩盒对象的子元素的排列方式：文字垂直居中 */
            /* -webkit-box-orient: vertical;  */
        }
    </style>
</head>

<body>
    <div class="box1">
        你好，此处省略一万字说明。
    </div>
    <div class="box">
        你好，此处省略一万字说明。shide jsahlifgla.
    </div>
</body>

</html>